<template>
	<view class="content">
		<view class="top">
			<view class="item" v-for="(item,index) in typeList" :key="item.value" :class="{active:type == item.value}" @click="handleTab(item.value)">
				{{item.name}}
			</view>
		</view> 
		<view class="list" v-if="commentList.length > 0">
			<view class="item"  v-for="item in commentList" :key="item.id">
				<view class="st">
					<view class="user">
						<image :src="item.memberIcon"  mode=""></image>
						<view class="text">
							<view class="name">
								<text>{{item.memberNickName}}</text>
							</view>
							<view class="start">
								<u-rate :count="5" active-color="#333" v-model="item.star" :readonly="true" size="13"></u-rate>
							</view>
						</view>
					</view> 
					<view class="time">
						{{item.createTime}}
					</view>
				</view>
				<view class="con">
					{{item.content}}
				</view>
				<view class="imglist" v-if="item.pics">
					<image v-for="(sitem,sindex) in item.pics.split(',')" :key="sitem" :src="sitem" mode="" @click="handlePreviewImage(sindex,item.pics)"></image>
			 </view>
			</view>
			<u-loadmore class="loadmore" :status="status" v-if="page > 1" />
		</view>
		<view class="null" v-else>
			<u-empty text="暂无内容" icon="https://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</view> 
	  <loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 5,
				type: 0,
				commentList: [],
				typeList: [{
					name: '全部',
					value: 0
				}, {
					name: '好评',
					title: 'comgood',
					value: 5
				}, {
					name: '中评',
					title: 'combad',
					value: 3
				}, {
					name: '差评',
					title: 'comimage',
					value: 1
				}, {
					name: '有图',
					title: 'comsoso',
					value: 6
				}],
				typeInfo: '',
				status: 'loadmore',
				allData: false,
				pagesize: 10,
				page: 1,
				goodsId: ''
			}
		},
		onLoad(options) { 
			// const info = JSON.parse(options.info)
			// this.typeInfo = info
			this.goodsId = options.id
			this.getList()
		},
		onReachBottom() {
			if (this.allData) {
				this.status = 'loading'
				this.page++
				this.getList();
			}
		},
		methods: {
			handleTab(type) {
				this.type = type
				this.page = 1
				this.getList()
			},
			handlePreviewImage(index,imgList) {
				uni.previewImage({
					urls: imgList.split(','),
					current: index, 
				})
			},
			getList() {
				this.$http({
					url: '/pmsComment/paginQuery',
					method: 'get',
					data: {
						productId: this.goodsId,
						type: this.type, 
						pageNum: this.page,
						pageSize: this.pagesize
					}
				}).then(data => { 
					if (this.page == 1) {
						this.commentList = data.list ? data.list : []
					} else {
						if(data.list){
							this.commentList.push(...data.list)
						} 
					}  
					if (data.totalPage > data.pageNum) {
						this.allData = true
						this.status = 'loading'
					} else {
						this.status = 'nomore' 
					    this.allData = false
					}  
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.list {  
		box-sizing: border-box;
		padding-bottom: 40rpx;
		padding-top: 20rpx;

		.item {
			background: #fff; 
			padding: 30rpx;
			margin-bottom: 20rpx;
			.st{
				display: flex;
				justify-content: space-between;
			}
				.time {
						font-size: 24rpx;
						color: #999999;
				}
			.user {
				display: flex;
				align-items: flex-start;

				image {
					width:56rpx;
					height: 56rpx;
					border-radius: 50%;
				}

				.text {
					margin-left: 20rpx; 
					.start {
						margin-left: auto;
					}
					.name {
						font-size: 24rpx;
						color: #999999;
					}
				} 
			}

			.con {
				font-size: 28rpx;
				color: #333333;
				margin: 20rpx 0;
			}

			.imglist {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 150rpx;
					height: 150rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
				}
			}
		}
	}

	.top {
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;

		.item {
			height: 56rpx;
			line-height: 56rpx;
			padding: 0 20rpx;
			background: #fff; 
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 16rpx;
			margin-right: 16rpx;

			&.active {
				color: #fff;
				background: #020202;
			}
		}
	}
</style>